<!--督导结果分析-->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="xq" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in xqList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="专家姓名">
        <el-input v-model="teacherName" size="mini" clearable placeholder="请输入专家姓名" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <div class="button-style" style="min-width: 75px; margin-top: 6px;" @click="eleGroup">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </el-form>
    <el-table
      border
      :data="tableData"
      style="margin-bottom: 15px;"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class"
      v-loading="ifTableLoading">
      <el-table-column sortable prop="xi" label="系" width="156" align="center" />
      <el-table-column prop="tckr" label="专家姓名" width="155" align="center" sortable />
      <el-table-column prop="zxddks" label="专项督导课时" width="155" align="center" />
      <el-table-column prop="rctkks" label="日常听课课时" width="155" align="center" />
      <el-table-column prop="zks" label="总课时" width="155" align="center" />
      <el-table-column prop="tkzcs" label="听课总次数" width="155" align="center" />
      <el-table-column prop="y" label="优" align="center" />
      <el-table-column prop="l" label="良" align="center" />
      <el-table-column prop="z" label="中" align="center" />
      <el-table-column prop="c" label="差" align="center" />
      <el-table-column prop="ybl" label="优秀率" align="center" />
    </el-table>
    <div class="button-style" style="width: auto; border-color: #f3b815; background-color: #fff6ef;">
      <img src="@/assets/assessment/icon-export.png" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="督导专家数据分析.xls"
        style="color: #f3b815;">
        <span style="font-size: 14px;">导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {eleGroup} from "@/api/teacher/admin";
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
export default {
  data() {
    return {
      total: 0, //总条数
      pageSize: 10, //条数
      currentPage: 1, //当前页数
      xq: "",
      xqList: [],
      teacherName: "",
      tableData: [],
      ifTableLoading: false,
      jsonFields: {
        系: 'xi',
        专家姓名: 'tckr',
        专项督导课时: 'zxddks',
        日常听课课时: 'rctkks',
        总课时 :'zks',
        听课总次数: 'tkzcs',
        优: 'y',
        良: 'l',
        中: 'z',
        差: 'c',
        优秀率: 'ybl'
      }
    };
  },
  methods: {
    async initPageData() {
      this.ifTableLoading = true;
      await this.getXqList();
      //await this.yueGroup();
      //await this.getlist();
      await this.eleGroup();
    },

    async getXqList(resultCall) {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        let xqList = result.data.data || [];
        this.xqList = xqList.map(item => ({value: item.xqmc, label: item.xqmc}));
        if (xqList.length > 0) {
          this.xq = xqList[0].xqmc;
        }
      }
    },
    async eleGroup() {
      let obj = {
        term : this.xq,
        tckr:this.teacherName
      };
      const query = {
        size: this.pageSize,
        current: this.currentPage
      }
      return new Promise(() => {
        eleGroup(obj, query).then((res) => {
          this.ifTableLoading = false;
          this.tableData = res.data.data.records;
          console.log(res.data.data,1111111111)
          this.total = res.data.data.total
          // resolve();
        });
      });
    },
    handleCurrentChange: function (val) {
      this.currentPage = val
      this.eleGroup()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.eleGroup()
    }
  },
  mounted() {
    this.initPageData();
  },
};
</script>
<style lang="less" scoped>
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
